<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <%
        String contextPath = request.getContextPath();
        String basePath = request.getScheme() + "://"
                + request.getServerName() + ":" + request.getServerPort()
                + contextPath + "/";
    %>
    <base href="<%=basePath%>">
    <meta charset="utf-8">
    <title></title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="stylesheet" href="css/safe/css.css"/>
    <link rel="stylesheet" href="css/safe/common.min.css"/>
    <link rel="stylesheet" href="css/safe/ms-style.min.css"/>
    <link rel="stylesheet" href="css/safe/personal_member.min.css"/>
    <link rel="stylesheet" href="css/safe/Snaddress.min.css"/>
    <style>
        body {
            background: #f5f5f5;
        }

        .sui-table th {
            padding: 16px 8px;
            line-height: 18px;
            text-align: center;
            vertical-align: middle;
            bcollect-top: 1px solid #e6e6e6;
            font-weight: normal;
            font-size: 14px;
            color: #333333;
        }

        .sui-table td {
            padding: 16px 8px;
            line-height: 18px;
            text-align: center;
            vertical-align: middle;
            bcollect-top: 1px solid #e6e6e6;
            font-weight: normal;
            font-size: 12px;
            color: #333333;
        }

        img {
            max-width: 100%;
            height: auto;
            /*vertical-align: bottom;*/
            bcollect: 0;
            -ms-interpolation-mode: bicubic;
            margin-left: -10px;
        }

        a {
            color: white;
            text-decoration: none;
        }

        a:hover {
            color: #ff8b46;
            text-decoration: none;
        }

        dd {
            font-size: 16px;
            color: white;
        }

        .collect_table {
            width: 210px;
            height: 40px;
            font-size: 16px;
        }

        .collect_td {
            font-size: 15px;
            height: 50px;
            color: #000;
        }

        .btn {
            width: 60px;
            height: 28px;
            bcollect: 1px solid black;
            margin-top: -30px;
        }

        .btn:hover {
            color: white;
            background: #95c6ff;
            cursor: pointer;
        }
    </style>
</head>
<body class="ms-body">

<jsp:include page="user_center_header.jsp"></jsp:include>

<div id="ms-center" class="personal-member">
    <div class="cont">

        <jsp:include page="left_menu.jsp"></jsp:include>

        <div class="cont-main">
            <div class="main-wrap mt15" style="bcollect: 0px;">
                <div class="server-wrapper">
                    <div class="server-tab" style="margin-top: 26px;">
                        <h3>
                            <span style="height: 20px; width: 2px;background: orangered;float: left;top: 10px;position: absolute;"></span>
                            <strong style="margin-left: 10px;font-size: 20px;margin-top: -25px;position: absolute;">我的收藏</strong>
                        </h3>
                        <div style="vertical-align: bottom;text-align: center;margin-top: -30px;">
                            <div style="display: table;width: 1040px;padding: 10px;float: left;background-color: #fff;height: 250px;bcollect: 1px solid #d1d3d9;">

                                <div style="display: table-cell;">

                                    <table id="collect_table">
                                        <tr style="background: #d1e5ea;">
                                            <th width="380px" style="font-size: 16px;">景点名称</th>
                                            <th class="collect_table">销量</th>
                                            <th class="collect_table" style="width: 190px;">收藏量</th>
                                            <th class="collect_table" style="width: 190px;">收藏时间</th>
                                            <th class="collect_table" style="width: 160px;">操作</th>
                                        </tr>
                                        <tr><td colspan="5"><hr></td></tr>
                                        <tr>
                                            <td class="collect_td">长隆飞鸟乐园</td>
                                            <td class="collect_td">6</td>
                                            <td class="collect_td">33</td>
                                            <td class="collect_td">2015-05-23</td>
                                            <td>
                                                <button class="btn">取消收藏</button>
                                            </td>
                                        </tr>
                                    </table>
                                </div>

                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="clear "></div>
    <div class="ng-footer ">

			<textarea class="footer-dom " id="footer-dom-02 ">
			</textarea>
        <div class="ng-fix-bar "></div>
    </div>
    <style type="text/css ">

        .ng-footer {
            height: 130px;
            margin-top: 0;
        }


        .ng-s-footer {
            height: 130px;
            background: none;
            text-align: center;
        }

        .ng-s-footer p.ng-url-list {
            height: 25px;
            line-height: 25px;
        }

        .ng-s-footer p.ng-url-list a {
            color: #666666;
        }

        .ng-s-footer p.ng-url-list a:hover {
            color: #f60;
        }

        .ng-s-footer .ng-authentication {
            float: none;
            margin: 0 auto;
            height: 25px;
            width: 990px;
            margin-top: 5px;
        }

        .ng-s-footer p.ng-copyright {
            float: none;
            width: 100%;
        }

        .root1200 .ng-s-footer p.ng-copyright {
            width: 100%;
        }
    </style>
</div>

<script type="text/javascript" src="js/user_center/center.js"></script>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/layer/layer.js"></script>
<script type="text/javascript" src="js/getDateStr.js"></script>
<script>
    var prePay = 0;
    var preTrip = 0;
    var preComment = 0;
    var preCancel = 0;

    $(function () {
        // 页面加载后查询所有订单
        queryAllcollect();
    });

    // 查询所有的订单
    function queryAllcollect() {
        // 发送请求请求
        $.post("collect/userCollectAllSight", {}, function (collects) {
            // 显示当前用户所有收藏的景点
            showAllCollect(collects);
        });
    }

    // 显示订单
    function showAllCollect(collects) {

        var title = '<tr style="background: #d1e5ea;">\n' +
            '                                            <th width="380px" style="font-size: 16px;">景点名称</th>\n' +
            '                                            <th class="collect_table">销量</th>\n' +
            '                                            <th class="collect_table" style="width: 190px;">收藏量</th>\n' +
            '                                            <th class="collect_table" style="width: 190px;">收藏时间</th>\n' +
            '                                            <th class="collect_table" style="width: 160px;">操作</th>\n' +
            '                                        </tr>';

        var table = "";
        for (var i = 0; i < collects.length; i++) {
            var collect = collects[i];
            var sight = collect.sight;
            var dateStr = getDateStr(collect.collectTime);

            table += '<tr>\n' +
                '                                            <td class="collect_td">' + sight.sightName + '</td>\n' +
                '                                            <td class="collect_td">' + sight.sellCount + '</td>\n' +
                '                                            <td class="collect_td">' + sight.collectCount + '</td>\n' +
                '                                            <td class="collect_td">' + dateStr + '</td>\n' +
                '                                            <td>\n' +
                '                                                <button class="btn" onclick="cancel(\'' + sight.sightId + '\')">取消收藏</button>\n' +
                '                                            </td>\n' +
                '                                        </tr><tr><td colspan="5"><hr></td></tr>';

        }
        $("#collect_table").html(title + table);
    }

    function cancel(sightId) {
        // 添加功能
        $.post("collect/cancelCollectSight", {sightId: sightId}, function (data) {
            if (data.flag) {// 代码刷新页面
                // layer.msg("取消收藏成功！", {icon: 1, time: 1500});
                location.reload();
            } else {
                layer.msg(data.errorMsg, {icon: 6}, 1500);
            }
        });
    }

</script>

</body>
</html>